<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<title>产品信息</title>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="static/layui/css/layui.css"  media="all">
    <style type="text/css">
        .layui-table{
            width: 50%;
            margin-left: 25%;
        }
    </style>
</head>
<body>
<br>
<div class="layui-btn-group demoTable" style="margin-bottom: 10px;">
</div>
<table class="layui-table" lay-data="{width: 1200, height:500, page:true, id:'idTest'}" lay-filter="demo">
    <thead>
    <tr>
        <th lay-data="{field:'id', width:100, sort: true}">编号 </th>
        <th lay-data="{field:'username', width:180, sort: true}">产品名</th>
        <th lay-data="{field:'sex', width:140}">售价</th>
        <th lay-data="{field:'job', width:100}">折扣</th>
        <th lay-data="{field:'job', width:100}">供应商</th>
        <th lay-data="{fixed: 'right', width:300, align:'center', toolbar: '#barDemo'}">操作 </th>
    </tr>
    </thead>
    <tbody>
    <c:forEach items="${proList}" var="e">
        <tr>
            <td>${e.id}</td>
            <td>${e.productName}</td>
            <td>${e.sale}</td>
            <td>${e.cost}</td>
            <td>${e.address}</td>
        </tr>
    </c:forEach>
    </tbody>
</table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script src="static/layui/layui.js" charset="utf-8"></script>
<script>
    layui.use(['table','layer'], function(){
        var table = layui.table
            ,layer = layui.layer
            ,$ = layui.$;
        //监听工具条
        table.on('tool(demo)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                window.location.href="deletePro?id="+data.id+"";
            } else if(obj.event === 'edit'){
                window.location.href="toUpdatePro?id="+data.id+"";
            }
        });
        var $ = layui.$, active = {
            checkname: function(){ //弹出对话框
                layer.prompt({title:'请输入名字的一部分'},function(value){
                    window.location.href="hrefmohuname?username="+value+"";
                });
            }
        };
        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });

</script>
<script>
    layui.use('layer', function(){ //独立版的layer无需执行这一句
        var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句

        //触发事件
        var active = {
            setTop: function(){
                var that = this;

            }
            ,confirmTrans: function(){
                //配置一个透明的询问框
                layer.msg('大部分参数都是可以公用的<br>合理搭配，展示不一样的风格', {
                    time: 20000, //20s后自动关闭
                    btn: ['明白了', '知道了', '哦']
                });
            }
        }});
</script>
</script>


</body>
</html>